<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户登录</title>
  <style>
    /* 保持原有CSS样式不变 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    }

    body {
      background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      padding: 20px;
    }

    .login-container {
      background-color: white;
      border-radius: 12px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      width: 100%;
      max-width: 420px;
      padding: 40px 35px;
      position: relative;
      overflow: hidden;
    }

    .login-container::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 5px;
      background: linear-gradient(to right, #6a11cb, #2575fc);
    }

    h1 {
      text-align: center;
      margin-bottom: 30px;
      color: #333;
      font-weight: 600;
      font-size: 28px;
    }

    .input-group {
      margin-bottom: 20px;
      position: relative;
    }

    label {
      display: block;
      margin-bottom: 8px;
      color: #555;
      font-weight: 500;
      font-size: 14px;
    }

    input[type="email"],
    input[type="password"] {
      width: 100%;
      padding: 14px 15px;
      border: 1px solid #ddd;
      border-radius: 8px;
      font-size: 16px;
      transition: all 0.3s;
    }

    input[type="email"]:focus,
    input[type="password"]:focus {
      border-color: #6a11cb;
      box-shadow: 0 0 0 2px rgba(106, 17, 203, 0.2);
      outline: none;
    }

    .options {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 25px;
      font-size: 14px;
    }

    .forgot-password {
      color: #6a11cb;
      text-decoration: none;
      transition: color 0.2s;
    }

    .forgot-password:hover {
      color: #2575fc;
      text-decoration: underline;
    }

    .register {
      color: #666;
    }

    .register a {
      color: #6a11cb;
      text-decoration: none;
      font-weight: 500;
      transition: color 0.2s;
    }

    .register a:hover {
      color: #2575fc;
      text-decoration: underline;
    }

    .login-btn {
      width: 100%;
      padding: 14px;
      background: linear-gradient(to right, #6a11cb, #2575fc);
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s;
      margin-bottom: 25px;
    }

    .login-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(106, 17, 203, 0.4);
    }

    .login-btn:active {
      transform: translateY(0);
    }

    .divider {
      text-align: center;
      position: relative;
      margin: 25px 0;
      color: #999;
      font-size: 14px;
    }

    .divider::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      width: 45%;
      height: 1px;
      background-color: #eee;
    }

    .divider::after {
      content: '';
      position: absolute;
      top: 50%;
      right: 0;
      width: 45%;
      height: 1px;
      background-color: #eee;
    }

    .qq-login {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 12px;
      border: 1px solid #ddd;
      border-radius: 8px;
      background-color: #f8f9fa;
      cursor: pointer;
      transition: background-color 0.2s;
    }

    .qq-login:hover {
      background-color: #f0f2f5;
    }

    .qq-icon {
      width: 24px;
      height: 24px;
      margin-right: 10px;
      background-color: #12B7F5;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-weight: bold;
      font-size: 14px;
    }

    .qq-login span {
      color: #333;
      font-size: 15px;
    }

    /* 新增按钮容器样式 */
    .additional-buttons {
      display: flex;
      gap: 15px;
      margin-top: 20px;
    }

    /* 次要按钮样式 - 与主按钮保持相同色调但不同样式 */
    .secondary-btn {
      flex: 1;
      padding: 12px;
      background: transparent;
      border: 2px solid #6a11cb;
      color: #6a11cb;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s;
    }

    .secondary-btn:hover {
      background: linear-gradient(to right, #6a11cb, #2575fc);
      color: white;
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(106, 17, 203, 0.3);
    }

    .secondary-btn:active {
      transform: translateY(0);
    }

    /* 移动端适配 */
    @media (max-width: 480px) {
      .additional-buttons {
        flex-direction: column;
        gap: 10px;
      }

      .secondary-btn {
        padding: 14px;
      }
    }

    @media (max-width: 480px) {
      .login-container {
        padding: 30px 25px;
      }

      h1 {
        font-size: 24px;
      }

      .options {
        flex-direction: column;
        align-items: flex-start;
      }

      .register {
        margin-top: 10px;
      }
    }
  </style>
</head>
<body>
<div class="login-container">
  <h1>用户登录</h1>

  <!-- 修改表单，移除action属性，使用JavaScript处理 -->
  <form id="loginForm" method="post">
    <!-- 登录失败提示 -->
    <p th:if="${param.error}" style="color: red;">邮箱或密码错误</p>

    <div class="input-group">
      <label for="email">邮箱</label>
      <input type="email" id="email" name="email" placeholder="请输入邮箱" required>
    </div>
    <div class="input-group">
      <label for="password">密码</label>
      <input type="password" id="password" name="password" placeholder="请输入密码" required>
    </div>
    <button type="submit" class="login-btn">登录</button>
  </form>

  <!-- 新增：重置密码和注册按钮 -->
  <div class="additional-buttons">
    <button type="button" class="secondary-btn" id="forgetPasswordBtn">重置密码</button>
    <button type="button" class="secondary-btn" id="registerBtn">注册</button>
  </div>


  <!-- 原QQ登录模块保持注释，如需启用可直接取消注释 -->
<!--  <%&#45;&#45;    <div class="divider">或使用以下方式登录</div>&#45;&#45;%>-->
<!--  <%&#45;&#45;    <div class="qq-login">&#45;&#45;%>-->
<!--  <%&#45;&#45;        <div class="qq-icon">QQ</div>&#45;&#45;%>-->
<!--  <%&#45;&#45;        <span>QQ登录</span>&#45;&#45;%>-->
<!--  <%&#45;&#45;    </div>&#45;&#45;%>-->
</div>

<script>
  let isLoginBtnClicked = false;
  document.querySelector('.login-btn').addEventListener('click', function() {
    isLoginBtnClicked = true;
  });
  // 修改表单提交处理
  document.getElementById('loginForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    if (!isLoginBtnClicked) {
      alert('请点击「登录」按钮提交表单');
      return;
    }

    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;

    try {
      const response = await fetch('/api/user/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: new URLSearchParams({
          email: email,
          password: password
        })
      });

      // 若接口返回404/500，主动抛出错误
      if (!response.ok) {
        throw new Error(`接口错误：${response.status}`);
      }

      const data = await response.json();
      if (data.success) {
        // 登录成功：跳转到首页（使用相对路径，避免硬编码端口）
        window.location.href = '/';
      } else {
        alert(data.message); // 显示后端返回的失败信息
      }
    } catch (error) {
      console.error('登录请求失败:', error);
      // 更精准的错误提示，帮助排查问题
      alert('登录失败：可能是接口路径错误或服务器异常，请检查后端配置');
    } finally {
      isLoginBtnClicked = false; // 重置标记，避免重复提交
    }
  });
  // 新增：重置密码按钮点击事件
  document.getElementById('forgetPasswordBtn').addEventListener('click', function() {
    window.location.href = '/forgetPassword'; // 跳转到重置密码页面
  });

  // 新增：注册按钮点击事件
  document.getElementById('registerBtn').addEventListener('click', function() {
    window.location.href = '/registration'; // 跳转到注册页面
  });





</script>
</body>
</html>